<template>
    <div class="hcp">
        <div class="title"></div>
        <div class="cnt">
            <div class="left">
                <div class="cir">
                    <span>{{ rate }}</span>%
                </div>
                <div class="echarts-box">
                    <v-chart :options="option" auto-resize />
                </div>
            </div>
            <div class="right">
                <div :class="['item', 'item' + (index + 1)]" v-for="(item,index) in lastRes" :key="item.name">
                    <div class="name">{{ item.name }}</div>
                    <div class="num">{{ item.value }}<span>个</span></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "hcp",
    props: {
        hcpData: {
            type: Object,
            default: () => ({ satisfaction: 968, good: 253, normal: 124, bad: 3 }),
        }
    },
    data() {
        return {

        }
    },
    computed: {
        rate(){
            let total = this.lastRes.reduce((a,b) => {
                return a + b.value;
            },0)
            if(total == 0){
                return 0
            }else{
                let res = ((total - this.hcpData.bad) / total * 100).toFixed(1);
                return res == 100 ? 100 : res;
            }
        },
        lastRes() {
            let arr = [
                { key: "satisfaction",value: 0, name: '非常满意' },
                { key: "good",value: 0, name: '满意' },
                { key: "normal",value: 0, name: '基本满意' },
                { key: "bad",value: 0, name: '不满意' },
            ]
            let result = arr.map(item => {
                return {
                    ...item,
                    value: this.hcpData[item.key]
                }
            })
            return result
        },
        option() {
            let unit = "%";
            return {
                color: ["#23caff","#00ecb3", "#1969e2", "#ffb800"],
                textStyle: {
                    fontFamily: 'Source Han Sans CN',
                },
                series: [
                    {
                        type: 'pie',
                        padAngle: 4,
                        labelLine: {
                            show: false
                        },
                        label: {
                            show: false,
                            position: 'center',
                            // fontFamily: "Source Han Sans CN",
                            // formatter: () => {
                            //     return `{value|${98.6}}{unit|${unit}}`
                            // },
                            // rich: {
                            //     value: {
                            //         fontSize: 28,
                            //         color: "#fff",
                            //     },
                            //     unit: {
                            //         color: "#e5e9ff",
                            //         fontSize: 20,
                            //     }
                            // }
                        },
                        minAngle: 2,
                        radius: ["62%", "74%"],
                        center: ['50%', '50%'],
                        data: this.lastRes
                    }
                ]
            };
        },
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
.hcp{
    margin-bottom: 15px;
}
.title{
    width: 450px;
    height: 48px;
    background: url("~@/assets/home/left2.png") no-repeat;
    background-size: 100% 100%;
}
.cnt{
    display: flex;
    padding: 7px 0 0 4px;
    .left{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 204px;
        height: 204px;
        background: url("~@/assets/home/circle.png") no-repeat;
        background-size: 100% 100%;
        .cir{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 84px;
            height: 84px;
            background: url("~@/assets/home/cir.png") no-repeat;
            background-size: 100% 100%;
            font-family: normal;
            color: #e5e9ff;
            font-size: 20px;
            line-height: 30px;
            span{
                color: #ffffff;
                font-family: "Source Han Sans CN";
                font-weight: 350;
                font-size: 28px;
                line-height: 42px;
            }
        }
        .echarts-box{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }
    .right{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: -6px;
        padding: 16px 0;
        .item{
            display: flex;
            align-items: center;
            width: 225px;
            height: 34px;
            padding-left: 58px;
            .name{
                width: 60px;
                color: #d3e5ff;
                font-family: "Source Han Sans CN";
                font-weight: 500;
                font-size: 14px;
                line-height: 20px;
                margin-right: 20px;
            }
            .num{
                color: #e5e9ff;
                font-family: "Source Han Sans CN";
                font-weight: 400;
                font-size: 20px;
                line-height: 30px;
                letter-spacing: 1.2px;
                span{
                    color: #accdff99;
                    font-size: 14px;
                    line-height: 21px;
                    margin-left: 4px;
                }
            }
        }
        .item1{
            background: url("~@/assets/home/i1.png") no-repeat;
            background-size: 100% 100%;
        }
        .item2{
            background: url("~@/assets/home/i2.png") no-repeat;
            background-size: 100% 100%;
        }
        .item3{
            background: url("~@/assets/home/i3.png") no-repeat;
            background-size: 100% 100%;
        }
        .item4{
            background: url("~@/assets/home/i4.png") no-repeat;
            background-size: 100% 100%;
        }
    }
}
</style>